<template>
    <div>
        <h1>角色权限管理</h1>
        <div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="角色" />

                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="edit(scope.row.id)">管理</el-button>
                        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" @click="showflag = true">添加</el-button>
        </div>

        <div>
            <el-dialog v-model="showflag" title="添加角色" width="500">
                <el-form :model="obj">
                    <el-form-item label="角色">
                        <el-input v-model="obj.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="上级">
                        <el-select v-model="obj.pid" placeholder="请选择上级角色">
                            <el-option v-for="role in roleOptions" :key="role.id" :label="role.name" :value="role.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="初始权限">
                        <el-input v-model="obj.resource" disabled autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="showflag = false">取消</el-button>
                        <el-button type="primary" @click="addRole">
                            添加
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>

        <div>
            <el-dialog v-model="showflag1" title="添加角色" width="700">
                <el-transfer v-model="value" :data="data" :titles="['可选权限', '已选权限']" />
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="showflag1 = false">取消</el-button>
                        <el-button type="primary" @click="onSubmit">
                            添加
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>


    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import http from "../http";
import { ElMessage } from "element-plus";
import axios from "axios";

const tableData = ref([]); // 表格数据
const roleOptions = ref([]); // 下拉菜单选项

// 初始化数据
let obj = ref({
    name: "",
    pid: "", // 上级角色ID
    resource: [2], // 初始权限固定为2
});


const showflag = ref(false);

// 获取角色列表
const getRole = () => {
    http.get("app/role/")
        .then((res) => {
            tableData.value = res.data.data; // 表格数据
            roleOptions.value = res.data.data; // 下拉菜单选项数据
        });
};

// 添加角色
const addRole = () => {
    console.log(obj.value);
    http.post("app/role/", obj.value)
        .then((res) => {
            console.log(res);
            ElMessage.success("添加成功");
            showflag.value = false;
            obj.value = {
                name: "",
                pid: "",
                resource: [2], // 重置时默认权限为2
            };
            getRole(); // 重新获取角色列表
        });
};

const del = (id) => {
    http.delete(`app/role/?id=${id}`)
        .then((res) => { 
            console.log(res,'999999999999999999999999');
            ElMessage.success("删除成功");
            getRole(); // 重新获取角色列表
        });

 }

const showflag1 = ref(false);
const dataid = ref(0);
const edit = (id) => {
    dataid.value = id;
    showflag1.value = true;
    
    http.get(`app/ro_re/?roleid=${id}`,)
        .then((res) => {
            console.log(res);
            data.value = res.data.redata; // 左边的数据
            value.value = res.data.idata; // 右边的数据
        })


    

};

const onSubmit = () => {
    http.post(`app/ro_re/`, {
        roleid: dataid.value,
        checklist:value.value,
    }).then((res) => {
        console.log(res);
        ElMessage.success("添加成功");
        showflag1.value = false;

    })
}

const data = ref([]); // 左边的数据
const value = ref([]); // 右边的数据





// 初始化页面加载时获取角色列表
onMounted(() => {
    getRole();
    
});
</script>
